<template>
  <div class="app-container">
    <!-- 123456456161 根据当前登录用户的角色展示不同的首页,现在还没有加判断 -->
    <el-row :gutter="0" style="border: 1px solid #f5f5f5;padding: 16px;">
      <el-col :span="24">
        <div style="display: flex;justify-content: space-between;">
          <div class="data_briefing">
            数据简报 <span>数据实时更新，上次更新时间:{{ bigscreen_nowtime }}</span>
          </div>
          <div>
            <el-button icon="el-icon-refresh" size="mini" @click="refresh" />
          </div>
        </div>
      </el-col>
      <el-col :span="24">
        <el-row :gutter="20" class="panel-group">
          <el-col :xs="6" :sm="6" :lg="6" class="card-panel-col">
            <el-skeleton class="card-panel" :loading="loading" :rows="4" animated>
              <template slot="template" />
              <template>
                <div
                  class="card-panels"
                  style="padding-right: 30px;
    display: flex;align-items: center;justify-content: space-between;"
                >
                  <div class="card-panel-description">
                    <div class="card-panel-text">
                      供货商总数
                    </div>
                    <count-to :start-val="0" :end-val="bigscreen_DataBulletin.supplierCount" :duration="3000" class="card-panel-num" />个
                  </div>
                  <div class="cashimg"><i class="el-icon-user-solid" /></div>
                </div>
              </template>
            </el-skeleton>
          </el-col>
          <el-col :xs="6" :sm="6" :lg="6" class="card-panel-col">
            <el-skeleton class="card-panel merchant" :loading="loading" :rows="4" animated>
              <template slot="template" />
              <template>
                <div
                  class="card-panels"
                  style="padding-right: 30px;
    display: flex;align-items: center;justify-content: space-between;"
                >
                  <div class="card-panel-description">
                    <div class="card-panel-text">
                      商户总数
                    </div>
                    <count-to :start-val="0" :end-val="bigscreen_DataBulletin.merchantCount" :duration="3000" class="card-panel-num" />个
                  </div>
                  <div class="cashimg"><i class="el-icon-s-shop" /></div>
                </div>
              </template>
            </el-skeleton>
          </el-col>
          <el-col :xs="6" :sm="6" :lg="6" class="card-panel-col">
            <el-skeleton class="card-panel userpeople" :loading="loading" :rows="4" animated>
              <template slot="template" />
              <template>
                <div
                  class="card-panels"
                  style="padding-right: 30px;
    display: flex;align-items: center;justify-content: space-between;"
                >
                  <div class="card-panel-description">
                    <div class="card-panel-text">
                      用户总数
                    </div>
                    <count-to :start-val="0" :end-val="bigscreen_DataBulletin.UserCount" :duration="3200" class="card-panel-num" />人
                  </div>
                  <div class="cashimg"><i class="el-icon-s-custom" /></div>
                </div>
              </template>
            </el-skeleton>
          </el-col>
          <el-col :xs="6" :sm="6" :lg="6" class="card-panel-col">
            <el-skeleton class="card-panel cardback" :loading="loading" :rows="4" animated>
              <template slot="template" />
              <template>
                <div
                  class="card-panels"
                  style="padding-right: 30px;
    display: flex;align-items: center;justify-content: space-between;"
                >
                  <div class="card-panel-description">
                    <div class="card-panel-text">
                      在售商品总数
                    </div>
                    <count-to :start-val="0" :end-val="bigscreen_DataBulletin.sellingGoodsCount" :duration="3600" class="card-panel-num" />件
                  </div>
                  <div class="cashimg"><i class="el-icon-s-goods" /></div>
                </div>
              </template>
            </el-skeleton>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
    <!--  -->
    <!-- <el-row :gutter="0" style="border: 1px solid #f5f5f5;padding: 16px;margin-top: 15px;">
      <el-col :span="24">
        <div class="data_briefing">
          待办事项
        </div>
      </el-col>
      <el-col :span="24">
        <el-row :gutter="40" class="panel-group">
          <el-col :xs="6" :sm="6" :lg="5" class="card-panel-col">
            <el-skeleton class="card-panel cardwhite" :loading="loading" :rows="4" animated>
              <template slot="template" />
              <template>
                <div class="card-panels_s" style="display: flex;align-items: center;">
                  <div class="cashimg"><i class="el-icon-document-copy" /></div>
                  <div class="card-panel-description">
                    <div class="card-panel-text">
                      售后订单待审核
                    </div>
                    <count-to :start-val="0" :end-val="data.month_member" :duration="3000" class="card-panel-num" />个
                  </div>
                </div>
              </template>
            </el-skeleton>
          </el-col>
          <el-col :xs="6" :sm="6" :lg="5" class="card-panel-col">
            <el-skeleton class="card-panel cardwhite" :loading="loading" :rows="4" animated>
              <template slot="template" />
              <template>
                <div class="card-panels_s" style="display: flex;align-items: center;">
                  <div class="cashimg"><i class="el-icon-truck" /></div>
                  <div class="card-panel-description">
                    <div class="card-panel-text">
                      待发货订单
                    </div>
                    <count-to :start-val="0" :end-val="data.total_member" :duration="3000" class="card-panel-num" />个
                  </div>
                </div>
              </template>
            </el-skeleton>
          </el-col>
          <el-col :xs="6" :sm="6" :lg="5" class="card-panel-col">
            <el-skeleton class="card-panel cardwhite" :loading="loading" :rows="4" animated>
              <template slot="template" />
              <template>
                <div class="card-panels_s" style="display: flex;align-items: center;">
                  <div class="cashimg"><i class="el-icon-sold-out" /></div>
                  <div class="card-panel-description">
                    <div class="card-panel-text">
                      待退款订单
                    </div>
                    <count-to :start-val="0" :end-val="data.order_amount" :duration="3200" class="card-panel-num" />人
                  </div>
                </div>
              </template>
            </el-skeleton>
          </el-col>
          <el-col :xs="6" :sm="6" :lg="5" class="card-panel-col">
            <el-skeleton class="card-panel cardwhite" :loading="loading" :rows="4" animated>
              <template slot="template" />
              <template>
                <div class="card-panels_s" style="display: flex;align-items: center;">
                  <div class="cashimg"><i class="el-icon-box" /></div>
                  <div class="card-panel-description">
                    <div class="card-panel-text">
                      待退款退货订单
                    </div>
                    <count-to :start-val="0" :end-val="data.total_article" :duration="3600" class="card-panel-num" />件
                  </div>
                </div>
              </template>
            </el-skeleton>
          </el-col>
          <el-col :xs="6" :sm="6" :lg="4" class="card-panel-col">
            <el-skeleton class="card-panel cardwhite" :loading="loading" :rows="4" animated>
              <template slot="template" />
              <template>
                <div class="card-panels_s" style="display: flex;align-items: center;">
                  <div class="cashimg"><i class="el-icon-set-up" /></div>
                  <div class="card-panel-description">
                    <div class="card-panel-text">
                      待换货订单
                    </div>
                    <count-to :start-val="0" :end-val="data.total_article" :duration="3600" class="card-panel-num" />件
                  </div>
                </div>
              </template>
            </el-skeleton>
          </el-col>
        </el-row>
      </el-col>
    </el-row> -->
    <!-- 待审核事项 -->
    <el-row :gutter="0">
      <el-col :span="15">
        <el-row :gutter="0" style="border: 1px solid #f5f5f5;padding: 16px;margin-top: 15px;min-height: 231px;">
          <el-col :span="24">
            <el-row :gutter="0" class="">
              <el-col :span="24">
                <div class="data_briefing">
                  待审核事项
                </div>
              </el-col>
              <el-col :xs="6" :sm="6" :lg="6" class="card-panel-col">
                <el-skeleton class="card-panel cardwhite" :loading="loading" :rows="4" animated>
                  <template slot="template" />
                  <template>
                    <div class="card-bacs">
                      <div class="card-panel-description">
                        <div class="card-panel-text">
                          商户入驻审核
                        </div>
                        <count-to :start-val="0" :end-val="bigscreen_waitedule.merchantEnterCheck" :duration="3000" class="card-panel-num" />个
                      </div>
                    </div>
                  </template>
                </el-skeleton>
              </el-col>
              <el-col :xs="6" :sm="6" :lg="6" class="card-panel-col">
                <el-skeleton class="card-panel cardwhite" :loading="loading" :rows="4" animated>
                  <template slot="template" />
                  <template>
                    <div class="card-bacs">
                      <div class="card-panel-description">
                        <div class="card-panel-text">
                          商户商品上架审核
                        </div>
                        <count-to :start-val="0" :end-val="bigscreen_waitedule.merchantGoodsApplyCheck" :duration="3000" class="card-panel-num" />个
                      </div>
                    </div>
                  </template>
                </el-skeleton>
              </el-col>
              <el-col :xs="6" :sm="6" :lg="6" class="card-panel-col">
                <el-skeleton class="card-panel cardwhite" :loading="loading" :rows="4" animated>
                  <template slot="template" />
                  <template>
                    <div class="card-bacs">
                      <div class="card-panel-description">
                        <div class="card-panel-text">
                          商户账户审核
                        </div>
                        <count-to :start-val="0" :end-val="bigscreen_waitedule.merchantCollectionInformationCheck" :duration="3200" class="card-panel-num" />人
                      </div>
                    </div>
                  </template>
                </el-skeleton>
              </el-col>
              <el-col :xs="6" :sm="6" :lg="6" class="card-panel-col">
                <el-skeleton class="card-panel cardwhite" :loading="loading" :rows="4" animated>
                  <template slot="template" />
                  <template>
                    <div class="card-bacs">

                      <div class="card-panel-description">
                        <div class="card-panel-text">
                          商户提现审核
                        </div>
                        <count-to :start-val="0" :end-val="bigscreen_waitedule.merchantWithdrawCheck" :duration="3600" class="card-panel-num" />件
                      </div>

                    </div>
                  </template>
                </el-skeleton>
              </el-col>
              <el-col :xs="6" :sm="6" :lg="6" class="card-panel-col">
                <el-skeleton class="card-panel cardwhite" :loading="loading" :rows="4" animated>
                  <template slot="template" />
                  <template>
                    <div class="card-bacs">

                      <div class="card-panel-description">
                        <div class="card-panel-text">
                          采购订单售后审核
                        </div>
                        <count-to :start-val="0" :end-val="bigscreen_waitedule.merchantOrderCaiGouCheck" :duration="3000" class="card-panel-num" />个
                      </div>
                    </div>
                  </template>
                </el-skeleton>
              </el-col>
              <el-col :xs="6" :sm="6" :lg="6" class="card-panel-col">
                <el-skeleton class="card-panel cardwhite" :loading="loading" :rows="4" animated>
                  <template slot="template" />
                  <template>
                    <div class="card-bacs">
                      <div class="card-panel-description">
                        <div class="card-panel-text">
                          自提订单售后审核
                        </div>
                        <count-to :start-val="0" :end-val="bigscreen_waitedule.merchantOrderZiTiCheck" :duration="3000" class="card-panel-num" />个
                      </div>
                    </div>
                  </template>
                </el-skeleton>
              </el-col>
              <el-col :xs="6" :sm="6" :lg="6" class="card-panel-col">
                <el-skeleton class="card-panel cardwhite" :loading="loading" :rows="4" animated>
                  <template slot="template" />
                  <template>
                    <div class="card-bacs">
                      <div class="card-panel-description">
                        <div class="card-panel-text">
                          线下充值审核
                        </div>
                        <count-to :start-val="0" :end-val="bigscreen_waitedule.userRechargeOrderCheck" :duration="3000" class="card-panel-num" />个
                      </div>
                    </div>
                  </template>
                </el-skeleton>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="9">
        <el-row>
          <el-col :span="24" style="padding: 0 0 0 10px;">
            <el-row :gutter="0" style="border: 1px solid #f5f5f5;margin-top: 15px;padding: 15px;min-height: 231px;">
              <el-col :span="24">
                <div class="data_briefing">
                  库存预警
                </div>
              </el-col>
              <el-col :span="24">
                <div class="dangertips">
                  <div><span class="sign"><i class="el-icon-hot-water" /></span>供货商商品库存预警：<span>{{ bigscreen_Inventory.supplierGoodsAlert }}</span>个商品预警</div>
                  <div class="go_handle_it" />
                </div>
              </el-col>
              <el-col :span="24">
                <div class="dangertips">
                  <div><span class="sign"><i class="el-icon-hot-water" /></span>选品库商品库存预警：<span>{{ bigscreen_Inventory.merchantSelectionLibrary }}</span>个商品预警</div>
                  <div class="go_handle_it" />
                </div>
              </el-col>
              <el-col :span="24">
                <div class="dangertips">
                  <div><span class="sign"><i class="el-icon-hot-water" /></span> 自营商品库存预警：<span>{{ bigscreen_Inventory.ZiYingGoodsAlert }}</span>个商品预警</div>
                  <div class="go_handle_it" />
                </div>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
    <!--  -->
    <el-row :gutter="0" style="border: 1px solid #f5f5f5;padding: 16px;margin-top: 15px;">
      <el-col :span="24">
        <div class="data_briefing">
          订单数据
        </div>
      </el-col>
      <el-col :span="24">
        <el-row :gutter="10" class="panel-group">
          <el-col :xs="6" :sm="6" :lg="4" class="card-panel-col">
            <el-skeleton class="card-panel cardwhite" :loading="loading" :rows="4" animated>
              <template slot="template" />
              <template>
                <div class="card-panels_s">

                  <div class="card-panel-description">
                    <div class="card-panel-text">
                      现金交易总额
                    </div>
                    <count-to :start-val="0" :end-val="bigscreen_OrderData.cashSumPrice" :duration="3000" class="card-panel-num" />个
                  </div>

                </div>
              </template>
            </el-skeleton>
          </el-col>
          <el-col :xs="6" :sm="6" :lg="3" class="card-panel-col">
            <el-skeleton class="card-panel cardwhite" :loading="loading" :rows="4" animated>
              <template slot="template" />
              <template>
                <div class="card-panels_s">
                  <div class="card-panel-description">
                    <div class="card-panel-text">
                      积分交易总额
                    </div>
                    <count-to :start-val="0" :end-val="bigscreen_OrderData.pointsSumPrice" :duration="3000" class="card-panel-num" />个
                  </div>
                </div>
              </template>
            </el-skeleton>
          </el-col>
          <el-col :xs="6" :sm="6" :lg="4" class="card-panel-col">
            <el-skeleton class="card-panel cardwhite" :loading="loading" :rows="4" animated>
              <template slot="template" />
              <template>
                <div class="card-panels_s">
                  <div class="card-panel-description">
                    <div class="card-panel-text">
                      提货券交易总额
                    </div>
                    <count-to :start-val="0" :end-val="bigscreen_OrderData.couponSumPrice" :duration="3200" class="card-panel-num" />人
                  </div>
                </div>
              </template>
            </el-skeleton>
          </el-col>
          <el-col :xs="6" :sm="6" :lg="3" class="card-panel-col">
            <el-skeleton class="card-panel cardwhite" :loading="loading" :rows="4" animated>
              <template slot="template" />
              <template>
                <div class="card-panels_s">
                  <div class="card-panel-description">
                    <div class="card-panel-text">
                      总订单数
                    </div>
                    <count-to :start-val="0" :end-val="bigscreen_OrderData.orderCount" :duration="3000" class="card-panel-num" />件
                  </div>
                </div>
              </template>
            </el-skeleton>
          </el-col>
          <el-col :xs="6" :sm="6" :lg="4" class="card-panel-col">
            <el-skeleton class="card-panel cardwhite" :loading="loading" :rows="4" animated>
              <template slot="template" />
              <template>
                <div class="card-panels_s">
                  <div class="card-panel-description">
                    <div class="card-panel-text">
                      待支付订单数
                    </div>
                    <count-to :start-val="0" :end-val="bigscreen_OrderData.delayPayOrderCount" :duration="3000" class="card-panel-num" />件
                  </div>
                </div>
              </template>
            </el-skeleton>
          </el-col>
          <el-col :xs="6" :sm="6" :lg="3" class="card-panel-col">
            <el-skeleton class="card-panel cardwhite" :loading="loading" :rows="4" animated>
              <template slot="template" />
              <template>
                <div class="card-panels_s">
                  <div class="card-panel-description">
                    <div class="card-panel-text">
                      待发货订单
                    </div>
                    <count-to :start-val="0" :end-val="bigscreen_OrderData.delayFaOrderCount" :duration="3000" class="card-panel-num" />件
                  </div>
                </div>
              </template>
            </el-skeleton>
          </el-col>
          <el-col :xs="6" :sm="6" :lg="3" class="card-panel-col">
            <el-skeleton class="card-panel cardwhite" :loading="loading" :rows="4" animated>
              <template slot="template" />
              <template>
                <div class="card-panels_s">
                  <div class="card-panel-description">
                    <div class="card-panel-text">
                      待收货订单
                    </div>
                    <count-to :start-val="0" :end-val="bigscreen_OrderData.delayShouOrderCount" :duration="3000" class="card-panel-num" />件
                  </div>
                </div>
              </template>
            </el-skeleton>
          </el-col>
          <el-col :xs="6" :sm="6" :lg="4" class="card-panel-col">
            <el-skeleton class="card-panel cardwhite" :loading="loading" :rows="4" animated>
              <template slot="template" />
              <template>
                <div class="card-panels_s">
                  <div class="card-panel-description">
                    <div class="card-panel-text">
                      现金退款总额
                    </div>
                    <count-to :start-val="0" :end-val="bigscreen_OrderData.cashRefundSumPrice" :duration="3000" class="card-panel-num" />个
                  </div>
                </div>
              </template>
            </el-skeleton>
          </el-col>
          <el-col :xs="6" :sm="6" :lg="3" class="card-panel-col">
            <el-skeleton class="card-panel cardwhite" :loading="loading" :rows="4" animated>
              <template slot="template" />
              <template>
                <div class="card-panels_s">
                  <div class="card-panel-description">
                    <div class="card-panel-text">
                      积分退款总额
                    </div>
                    <count-to :start-val="0" :end-val="bigscreen_OrderData.pointsRefundSumPrice" :duration="3000" class="card-panel-num" />个
                  </div>
                </div>
              </template>
            </el-skeleton>
          </el-col>
          <el-col :xs="6" :sm="6" :lg="4" class="card-panel-col">
            <el-skeleton class="card-panel cardwhite" :loading="loading" :rows="4" animated>
              <template slot="template" />
              <template>
                <div class="card-panels_s">
                  <div class="card-panel-description">
                    <div class="card-panel-text">
                      提货券退款总额
                    </div>
                    <count-to :start-val="0" :end-val="bigscreen_OrderData.couponRefundSumPrice" :duration="3000" class="card-panel-num" />人
                  </div>
                </div>
              </template>
            </el-skeleton>
          </el-col>
          <el-col :xs="6" :sm="6" :lg="3" class="card-panel-col">
            <el-skeleton class="card-panel cardwhite" :loading="loading" :rows="4" animated>
              <template slot="template" />
              <template>
                <div class="card-panels_s">
                  <div class="card-panel-description">
                    <div class="card-panel-text">
                      已完成订单
                    </div>
                    <count-to :start-val="0" :end-val="bigscreen_OrderData.finishOrderCount" :duration="3000" class="card-panel-num" />件
                  </div>
                </div>
              </template>
            </el-skeleton>
          </el-col>
          <el-col :xs="6" :sm="6" :lg="4" class="card-panel-col">
            <el-skeleton class="card-panel cardwhite" :loading="loading" :rows="4" animated>
              <template slot="template" />
              <template>
                <div class="card-panels_s">
                  <div class="card-panel-description">
                    <div class="card-panel-text">
                      仅退款订单数
                    </div>
                    <count-to :start-val="0" :end-val="bigscreen_OrderData.refundOrderCount" :duration="3000" class="card-panel-num" />件
                  </div>
                </div>
              </template>
            </el-skeleton>
          </el-col>
          <el-col :xs="6" :sm="6" :lg="3" class="card-panel-col">
            <el-skeleton class="card-panel cardwhite" :loading="loading" :rows="4" animated>
              <template slot="template" />
              <template>
                <div class="card-panels_s">
                  <div class="card-panel-description">
                    <div class="card-panel-text">
                      退货退款订单数
                    </div>
                    <count-to :start-val="0" :end-val="bigscreen_OrderData.ThuiHuoOrderCount" :duration="3000" class="card-panel-num" />件
                  </div>
                </div>
              </template>
            </el-skeleton>
          </el-col>
          <el-col :xs="6" :sm="6" :lg="3" class="card-panel-col">
            <el-skeleton class="card-panel cardwhite" :loading="loading" :rows="4" animated>
              <template slot="template" />
              <template>
                <div class="card-panels_s">
                  <div class="card-panel-description">
                    <div class="card-panel-text">
                      换货订单数
                    </div>
                    <count-to :start-val="0" :end-val="bigscreen_OrderData.HuanHuoOrderCount" :duration="3000" class="card-panel-num" />件
                  </div>
                </div>
              </template>
            </el-skeleton>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import { getScreen } from '@/api/index'
import CountTo from 'vue-count-to'
import { count as apiCount } from '@/api/admin'
export default {
  name: 'Dashboard',
  components: { CountTo },
  data() {
    return {
      loading: true,
      bigscreen_DataBulletin: {},
      bigscreen_waitedule: {},
      bigscreen_Inventory: {},
      bigscreen_OrderData: {},
      bigscreen_nowtime: '',
      data: {
        month_member: 100,
        total_member: 200,
        order_amount: 300,
        total_article: 50
      },
      currentRole: 'adminDashboard'
    }
  },
  computed: {
    ...mapGetters(['roleRoutes'])
  },
  created() {
    // this.loading = true;

    if (!this.roleRoutes.includes('admin')) {
      // this.currentRole = 'editorDashboard'
    }
    getScreen().then((res) => {
      this.loading = false
      this.bigscreen_nowtime = res.data.dateTime
      this.bigscreen_DataBulletin = res.data.DataBulletin
      this.bigscreen_waitedule = res.data.waitCheckSchedule
      this.bigscreen_Inventory = res.data.InventoryAlert
      this.bigscreen_OrderData = res.data.OrderData
    })
  },
  methods: {
    refresh() {
      this.loading = true
      getScreen().then((res) => {
        this.loading = false
        this.bigscreen_nowtime = res.data.dateTime
        this.bigscreen_DataBulletin = res.data.DataBulletin
        this.bigscreen_waitedule = res.data.waitCheckSchedule
        this.bigscreen_Inventory = res.data.InventoryAlert
        this.bigscreen_OrderData = res.data.OrderData
      })
    }
  }
}
</script>
<style lang="scss">
.card-panel {
  .el-skeleton {
    padding: 10px;

    .el-skeleton__item {
      height: 12px;
    }

    .el-skeleton__paragraph {
      margin-top: 10px;
    }
  }
}
</style>

<style lang="scss" scoped>
.el-row{

}
.app-container {
  background-color: rgb(240, 242, 245);

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 15px;
  }
}

@media (max-width:1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
.data_briefing{
  font-weight: 600;
  color: #333;
  font-size: 18px;
  span{
    color: #666;
    font-size: 14px;
    font-weight: 500;
    margin-left: 10px;
  }
}
.dangertips{
  font-weight: 500;
  color: #333;
  font-size: 14px;
  margin-top: 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .sign{
    color: #d43131;
    font-weight: 600;
    margin-right: 5px;
  }
  .go_handle_it{
    color: #7abaff;
    font-weight: 600;
  }
  span{
    color: #7abaff;
    font-weight: 600;
    font-size: 16px;
  }
}
.panel-groups{

}
.panel-group {
  margin-top: 18px;
  margin-left: 30px;
}
.card-panel-col {
  // margin-bottom: 32px;
}
.card-bacs{
  .card-panel-description{
    padding:20px 5px !important;
  }
  .card-panel-text{
    color: #303030 !important;
    font-size: 14px;
    font-weight: 500;
  }
  .card-panel-num {
    font-size: 18px !important;
    color: #7abaff !important;
  }
}
.card-panels_s{
  // padding: 0 30px 0 10px;
  display: flex;align-items: center;
  .cashimg{
    font-size: 50px;
    color: #fff !important;
    width: 60px;
    height: 60px;
    background-image: linear-gradient(to bottom, #7abaff, #7abaff) !important;
    border-radius: 10px;
    font-size: 30px;
  }
  .card-panel-text{
    color: #303030 !important;
    font-weight: 500;
  }
  .card-panel-num {
    font-size: 18px !important;
    color: #7abaff !important;
    font-weight: 600;
  }
  .card-panel-description{
    padding:18px 14px !important;
  }
}
.card-panels{
  padding-right: 30px;
  display: flex;align-items: center;justify-content: space-between;
}
.card-panel {
  // height: 108px;
  cursor: pointer;
  font-size: 12px;
  position: relative;
  overflow: hidden;
  color: #666;
  background-image: linear-gradient(to right, #98ccff, #7abaff);
  box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
  border-radius: 10px;

  .card-panel-description {
    padding: 24px 16px;
    color: #fff;
    font-weight: bold;
    .card-panel-text {
      line-height: 18px;
      color: #fff;
      font-size: 14px;
      margin-bottom: 12px;
    }

    .card-panel-num {
      font-size: 20px;
      color: #fff;
    }
  }
}

.cashimg {
  width: 60px;
  height: 60px;
  background-image: linear-gradient(to bottom, rgba(255,255,255,0.6), rgba(255,255,255,0.1)) !important;
  border-radius: 10px;
  font-size: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}
.cardback{
  background-image: linear-gradient(to right, #aabcfa, #92a8f8) !important;
}
.userpeople{
  background-image: linear-gradient(to right, #98ccff, #7abaff) !important;
}
.merchant{
  background-image: linear-gradient(to right, #97d1e6, #88cae2) !important;
}
.cardwhite{
  background-image: none !important;
  box-shadow:none !important;
}
</style>
